<template>
	<view class="content">
		<nav-bars backState="1000" :bgColor="navBackground" fontColor="#fff"></nav-bars>
		<view class="wrap" :style="{background: 'url('+bgImg+')',backgroundSize:'cover'}">
			<view class="top-column">
				<view class="nav"></view>
				<view class="title">
					<text>{{info.name}}</text>
				</view>
				<view class="activityRule" @click="goSkip('/pages_activity/pages/article/ruleDetails?id='+id)">
					活动规则
				</view>
			</view>
			<view class="wrap-luckDraw">
				<view class="box">
					<view class="item" v-for="(item,index) in data" :key='item.id'>
						<view class="box_item" style="display: flex;" :class="item.id===flag?'active':''"
							v-if="index===4"
							:style="{background: 'url('+startBtn+')',backgroundSize:'100% 100%',fontSize:'28rpx',alignItems: 'center'}"
							@click="item.id==0?luckDrawVerify():''">
							{{item.name}}
						</view>
						<view class="box_item" :class="item.id===flag?'active':''" v-else
							@click="item.id==0?luckDrawVerify():''">
							<image class="prizeIcon" :src="item.images"></image>
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="luckdraw-num">
				您已获得抽奖{{lotteryNumber}}次机会
			</view>
			<view class="gradualBg">
				<view class="prize-area">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/arr-lleft.png'" class="sidebar_a"></image>
							<text>我的奖品</text>
							<image :src="imageSrc+'/static/activity/arr-right.png'" class="sidebar_b"></image>
						</view>
						<view class="prize-item" v-if="prizeStatus==1">
							<image :src="imageSrc+'/static/activity/gold.png'"></image>
							<image :src="imageSrc+'/static/activity/volume.png'"></image>
							<image :src="imageSrc+'/static/activity/gift.png'"></image>
						</view>
						<view class="prize-item" v-else style="justify-content: center;">
							<image :src="imageSrc+'/static/activity/prizeNull.png'"></image>
							<text>您还没有获得奖品哦，赶紧参与活动吧~</text>
						</view>
						<view class="prizeBtn" v-if="prizeStatus==1"
							@click="goSkip('/pages_activity/pages/lotteryDraw/receivePrize/index')">
							查看全部奖品
						</view>
						<view class="prizeBtn" v-else style="margin-top: 58rpx;"
							@click="goTabBar('/pages/home/index/index')">
							立即参与获活动
						</view>
					</view>
				</view>
				<view class="rankingList" v-if="luckDrawList.length>0">
					<view class="box in-area">
						<view class="column">
							<image :src="imageSrc+'/static/activity/arr-lleft.png'" class="sidebar_a"></image>
							<text>幸运榜单</text>
							<image :src="imageSrc+'/static/activity/arr-right.png'" class="sidebar_b"></image>
						</view>
						<!-- <view class="wrap-list"> -->
						<scroll-view scroll-y="true" class="scroll-Y wrap-list" @lower-threshold='50'
							@scrolltolower="lower">
							<view class="list" v-for="(item ,index) in luckDrawList" :key="index">
								<view class="sidebar_a">
									<image :src="item.headimg"></image>
									<text>{{item.nickname}}</text>
								</view>
								<view class="sidebar_b">
									{{item.prize_name}}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="footer">
					<view class="bgBox"></view>
					<view class="copyright">本次活动的最终解释权归融易装所有</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRandomNum,
		GL
	} from './utils/index.js'
	import activity from '@/service/activity.js'
	export default {
		data() {
			return {
				//bg: this.$static + '/static/activity/bg.png',
				startBtn: this.$static + '/static/activity/luck_draw.png',
				gift: this.$static + '/static/activity/gift.png',
				imageSrc: this.$static,
				navBackground: '',
				data: [{
						id: 1,
						name: '',
						images: '',
					},
					{
						id: 2,
						name: '',
						images: '',
					},
					{
						id: 3,
						name: '',
						images: '',
					},
					{
						id: 8,
						name: '',
						images: '',
					},
					{
						id: 4,
						name: '',
						images: '',
					},

					{
						id: 7,
						name: '',
						images: '',
					},

					{
						id: 6,
						name: '',
						images: '',
					},

					{
						id: 5,
						name: '',
						images: '',
					},
				],
				flag: '', //中奖的编号
				time: 0, //旋转的值 
				isStart: false, //是否开始
				lotteryNumber: 0, //抽奖次数
				ratio: [],
				prizeList: [],
				prizeStatus: 1, //是否得奖
				page: 1,
				pagesize: 10,
				luckDrawList: [],
				id: '',
				prize_name: '',
				bgImg: '', //活动背景图
				info: {}, //活动详情

			}
		},
		onLoad(option) {
			this.$utils.getUrl()
			this.data.splice(4, 0, {
				id: 0,
				name: '开始'
			})
			this.id = option.id;
			this.activityInfo();
			this.getPrizeList(option.id)
			this.getdDrawcount();
			this.getList();
			this.getLuckDrawRanking(option.id);
		},
		onShareAppMessage(res) {
			uni.showShareMenu({
				withShareTicket: true
			})
			if (res.from === 'menu') {}
			return {
				title: '活动抽奖',
				//imageUrl: this.goodsInfo.round_imgs[0].image_path,
				imageUrl: this.bg,
				path: '/pages_activity/pages/lotteryDraw/luckyGrid?id=' + this.id + '&share_uid=' + this
					.userId,
				success: function(res) {
					console.log('成功', res);
				}
			};


		},
		onShareTimeline(res) {
			if (res.from === 'menu') {}
			return {
				title: '活动抽奖',
				//imageUrl: this.goodsInfo.round_imgs[0].image_path,
				imageUrl: this.bg,
				path: '/pages_activity/pages/lotteryDraw/luckyGrid?id=' + this.id + '&share_uid=' + this
					.userId,
				success: function(res) {
					console.log('成功', res);
				}
			};

		},
		methods: {
			goTabBar(url) {
				uni.switchTab({
					url: url
				});
			},
			lower(e) {
				this.page++;
				this.getLuckDrawRanking(this.id);
			},
			//活动详情
			activityInfo() {
				activity.activityBaseInfo({
						item_id: this.id,
					})
					.then(res => {
						let _this = this;
						if (res.code == -1) {
							_this.$common.errorToShow('活动不存在或已暂停');
							uni.navigateBack({
								delta: 1
							});
						} else {
							_this.info = res.data;
							_this.bgImg = res.data.back_img[0].path;
							if (res.code === 0) {
								_this.$common.errorToShow(res.msg);
							}
						}
					});
			},
			luckDrawVerify() {
				if (this.prizeList.length < 7) {
					this.$common.errorToShow('奖品配置完善中~');
					return;
				}
				activity.activityValid({
						item_id: this.id,
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							this.start();
						} else {
							_this.$common.errorToShow(res.msg)
						}
					});
			},
			start() {
				if (this.isStart) return
				if (this.lotteryNumber <= 0) {
					uni.showToast({
						title: '暂无抽奖次数',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.isStart = true
				let ratio = this.ratio

				// 中奖概率构造函数
				let gl = new GL({
					min: 1,
					max: 9,
					fenpei: ratio,
				});
				//
				let flagNew = gl.random(ratio) //概率
				var sumFlag = 0;
				var flag = 0;
				console.log(flagNew)
				for (var i = 0; i < this.prizeList.length; i++) {
					if (flagNew == this.prizeList[i].ratio) {
						flag = this.prizeList[i].sort;
					} else {
						continue;
					}
				}
				this.time = 6100 + (50 * flag)
				this.flag = 1
				this.lotteryNumber--
				this.fn(100)
			},
			clickBtn() {
				let date = new Date()
				let HH = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
				let mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
			},
			fn() {
				let time = this.time
				let n = 50
				let Timeout = () => {
					setTimeout(() => {
						time = time - n
						if (time <= 5000 && time > 4000) {
							n = 90
						}
						if (time <= 4000 && time > 3000) {
							n = 100
						} else if (time <= 3000 && time > 2500) {
							n = 500
						} else if (time <= 2500 && time > 2000) {
							n = 800
						} else if (time <= 2000) {
							n = 1000
						}
						if (time <= 0) {
							if (this.flag) {
								let title = '';
								let flag = this.flag;
								let prizeList = this.prizeList;
								for (var i = 0; i < prizeList.length; i++) {
									if (flag == prizeList[i].sort) {
										title = prizeList[i].prize_name;
										this.getWritePrize(prizeList[i].prize_id);
										break;
									}
								}
								this.prize_name = title;
							} else {
								uni.showToast({
									title: '很遗憾没有中奖',
									icon: 'none',
									duration: 2500
								});
							}
							this.isStart = false
							return false
						}
						if (this.flag < 8) {
							this.flag++
						} else {
							this.flag = 1
						}
						Timeout()
					}, n)
				}
				Timeout()
			},
			goSkip(url) {
				this.$common.navigateTo(url);
			},
			//奖品参数
			getPrizeList(item_id) {
				uni.showLoading()
				activity.luckDrawPrize({
						item_id: item_id,
						//user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							let data = res.data;
							_this.prizeList = data;
							_this.getPrizeParame();
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			getPrizeParame() {
				let arr = this.prizeList;
				arr.forEach((item, index) => {
					console.log(item.prize_img)
					this.data.forEach(item1 => {
						if (item1.id === item.sort) {
							item1.images = item.prize_img;
							item1.name = item.config_name;
							return;
						}
					})
				})
				var ratioArr = [];
				arr.forEach((item, index) => {
					if (item.prize_stock > 0) { //库存大于0
						ratioArr.push(item.ratio)
					}
				})
				this.ratio = ratioArr;
			},
			//抽奖可用次数
			getdDrawcount() {
				activity.drawcount({
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							let data = res.data.count;
							_this.lotteryNumber = data;
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},

			//得到的奖品
			getWritePrize(prize_id) {
				if (prize_id == '' || !prize_id) {
					uni.showToast({
						title: '很遗憾没有中奖',
						icon: 'none',
						duration: 2500
					});
					this.resLuckDrawDec();
					return;
				}
				activity.writePrize({
						prize_id: prize_id,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						let _this = this;
						if (res.code == 1) {
							var title = this.prize_name;
							uni.showToast({
								title: `恭喜您获得${title}`,
								icon: 'none',
								duration: 3500
							});
							setTimeout(function() {
								_this.prizeList = [];
								_this.getPrizeList(_this.id);
							}, 3000)
						} else {
							_this.$common.errorToShow(res.msg)
						}
					})
					.catch(err => {

					})
			},
			getList() {
				//uni.showLoading()
				activity.activityRecord({
						channel: 1,
						page: 1,
						pagesize: 10,
						user_id: uni.getStorageSync('userId'),
					})
					.then(res => {
						//uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							let data = res.data.data;
							if (data.length > 0) {
								_this.prizeStatus = 1;
							}
						} else {
							_this.prizeStatus = 0;
						}
					})
					.catch(err => {
						uni.showToast({
							title: '哎呀网络走丢了，请稍后再试~',
							icon: 'none',
							duration: 3000
						});
						//uni.hideLoading()
					})
			},
			//幸运榜单
			getLuckDrawRanking(item_id) {
				uni.showLoading()
				activity.luckDrawRanking({
						page: this.page,
						pagesize: this.pagesize,
						user_id: uni.getStorageSync('userId'),
						item_id: item_id
					})
					.then(res => {
						uni.hideLoading()
						let _this = this;
						if (res.code == 1) {
							let data = res.data.data;
							for (var i = 0; i < data.length; i++) {
								_this.luckDrawList.push(data[i]); // 加载的数据追加在上一页后面
							}
						} else {

						}
					})
					.catch(err => {
						uni.hideLoading()
					})
			},
			resLuckDrawDec() {
				activity.luckDrawDec({
					})
					.then(res => {

					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;

		.wrap {
			width: 100%;
			min-height: 100vh;
			position: absolute;
			top: 0;
			padding-bottom: 200rpx;

			.top-column {
				width: 100%;
				height: 0;
				padding-bottom: 50%;

				.nav {
					width: 100%;
					height: 10rpx;
					display: block;
				}

				.title {
					min-width: 410rpx;
					max-width: 580rpx;
					width: fit-content;
					width: -webkit-fit-content;
					width: -moz-fit-content;
					height: 57rpx;
					margin: auto;
					margin-top: 55%;
					background: #FFAF46;
					box-shadow: 0px 3px 2px 0px rgba(172, 48, 3, 0.44);
					border-radius: 29rpx;
					text-align: center;
					line-height: 57rpx;
					color: #D33400;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					padding-left: 10rpx;
				}

				.activityRule {
					position: absolute;
					width: 160rpx;
					height: 58rpx;
					right: 0;
					top: 12%;
					color: #FFDDD2;
					line-height: 58rpx;
					text-align: center;
					background: #FF5118;
					border-radius: 22rpx 0px 0px 22rpx;
				}
			}


			.wrap-luckDraw {
				margin-top: 208rpx;
				width: auto;
				height: 680rpx;

				.box {
					width: 580rpx;
					height: 510rpx;
					display: flex;
					margin: auto;
					flex-wrap: wrap;
					justify-content: space-around;
					align-items: center;

					.box_item {
						width: 172rpx;
						height: 154rpx;
						background-color: #fff;
						padding-bottom: 2rpx;
						color: #FF5118;
						//align-items: center;
						justify-content: center;
						border-radius: 24rpx;
						font-size: 24rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						padding: 0 8rpx 0 8rpx;

						.prizeIcon {
							width: 108rpx;
							height: 90rpx;
							margin: 10rpx auto;
						}

						&:nth-child(5) {
							color: #fff;
						}
					}

					.active {
						background-color: rgba(0, 0, 0, .5);
					}
				}
			}

			.luckdraw-num {
				width: 459rpx;
				height: 72rpx;
				margin: 20rpx auto;
				background: #FA3E3F;
				border-radius: 10rpx;
				line-height: 72rpx;
				text-align: center;
				color: #fff;
			}

			.gradualBg {
				width: 100%;
				position: absolute;
				height: auto;
				margin-top: 198rpx;
				background: linear-gradient(-6deg, #F56336, #F16547);

				.prize-area {
					width: 703rpx;
					height: 377rpx;
					background: #FFBB6E;
					border-radius: 20rpx;
					margin: auto;
					margin-top: -184rpx;
					display: flex;
					align-items: center;

					.box {
						width: 669rpx;
						height: 345rpx;

						.prize-item {
							width: 468rpx;
							height: 95rpx;
							margin: 42rpx auto;
							display: flex;
							font-size: 30rpx;
							justify-content: space-between;
							align-items: center;
							flex-wrap: wrap;
							color: #F66436;

							image {
								width: 92rpx;
								height: 92rpx;
								margin-bottom: 4rpx;
							}

							text {
								font-size: 24rpx;
								color: #989898;
							}
						}

						.prizeBtn {
							width: 290rpx;
							height: 60rpx;
							margin: auto;
							text-align: center;
							line-height: 60rpx;
							color: #fff;
							background: #F56134;
							border-radius: 29rpx;
						}
					}
				}

				.in-area {
					margin: auto;
					background: #FEFCFA;
					border-radius: 20rpx;

					.column {
						width: 280rpx;
						height: 30rpx;
						margin: 38rpx auto;
						line-height: 24rpx;
						display: flex;
						font-size: 30rpx;
						justify-content: space-between;
						align-items: center;
						color: #F66436;

						image {
							width: 57rpx;
							height: 20rpx;
						}
					}
				}

				.rankingList {
					width: 703rpx;
					height: 705.7rpx;
					background: #FFBB6E;
					border-radius: 20rpx;
					margin: auto;
					margin-top: 20rpx;
					display: flex;
					align-items: center;

					.box {
						width: 669rpx;
						height: 669.8rpx;

						.wrap-list {
							width: 92%;
							margin: 20rpx auto;
							height: 564rpx;
							overflow: hidden;

							.list {
								width: 100%;
								height: 72rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.sidebar_a {
									width: 52%;
									display: flex;
									align-items: center;

									image {
										width: 46rpx;
										height: 46rpx;
										margin-right: 20rpx;
									}

									text {
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
								}

								.sidebar_b {
									width: 48%;
									text-align: left;
									color: #9F6440;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}
							}
						}
					}
				}

			}
		}


		.footer {
			width: 100%;
			margin-top: 48rpx;

			.bgBox {

				height: 84rpx;
				background: rgba(255, 255, 255, 0.59);
				opacity: 0.2;
			}

			.copyright {
				width: 100%;
				position: absolute;
				text-align: center;
				line-height: 84rpx;
				left: 50%;
				transform: translate(-50%, -92rpx);
				font-weight: 500;
				color: #FFDED4;
			}
		}

	}
</style>
